<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      let dataX = this.data.map((v) => v.street)
      let dataY = this.data.map((v) => v.num)
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      
      let option = {
        grid: {
          top: 0,
          right: 10,
          left: 60,
          bottom: 30,
        },
        yAxis: [
          {
            name: '',
            data: dataX,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#aaa', // Y轴轴线
                width: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0, //这个一定要有，别忘记了
              rotate: 15,
              color: '#fff',
              fontSize: 10,
            },
          },
        ],
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              // lineStyle: {
              //   color: 'red', // X轴轴线
              // },
            },
            // nameTextStyle: {
            //   color: '#095D58',
            //   fontSize: 12,
            // },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#aaa', // X轴文字
                fontSize: 10,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#1a4b98', // 分割线条
                type: 'dashed'
              },
            },
          },
        ],
        series: [
          {
            type: 'bar',
            silent: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#08E8A4', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFA952', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: dataY,
            barWidth: 9,
            z: 1,
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#2f424a',
              },
            },
            // padding:10,
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [1, 9],
            symbolOffset: [1, -2],
            symbolPosition: 'start',
            symbolBoundingData: 200,
            data: dataY,
            z: 2,
            animationEasing: 'elasticOut',
          },
          //外框
          {
            name: '',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'right',
                color: '#fff',
                // textBorderWidth:0
              },
            },
            barGap: '-120%', // 设置外框粗细
            data: dataY,
            barWidth: 14,
            itemStyle: {
              normal: {
                color: 'transparent', // 填充色
                barBorderColor: '#BFE3FF', // 边框色
                barBorderWidth: 0.5, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: 'top', // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
